<template>
<el-main>
  <div class="banner">
  <div class="left">
      <div>
        <div class="tip">
          <p class="tip-l">人员定位</p>
          <p class="tip-r">
            <span>在线：{{online}}</span>
            <span>离线：{{offline}}</span>
          </p>
        </div>
        <div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            border>
            <el-table-column
              width="36">
              <template slot-scope="scope" >
                  <el-radio :label="scope.row.id" v-model="radioId" @change="select(scope.row)" style="color: #fff;"></el-radio>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="人员名称"
              width="120">
            </el-table-column>
            <el-table-column
              prop="phone"
              label="联系方式"
              width="120">
            </el-table-column>
            <el-table-column
              prop="roleName"
              label="角色"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              show-overflow-tooltip>
              <template slot-scope="scope" >
                  <span>{{scope.row.status==0?'离线':'在线'}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="lb">
        <div class="tip">
          <p class="tip-l">定位详情</p>
          <p class="tip-r">
            <span>位置最后更新时间：2022/10/23 10:17:15</span>
          </p>
        </div>
        <div class="detail">
          <p>人员姓名：{{selectData.name}}</p>
          <p>联系方式：{{selectData.phone}}</p>
          <p>角色：{{selectData.roleName}}</p>
          <p>状态：{{selectData.status==0?'离线':'在线'}}</p>
        </div>
      </div>
  </div>
  <div class="right">
  </div>
</div>
</el-main>
</template>

<script>
   export default{
   
      data(){
          return {
            tableData:[],
            selectData:[],
            radioId:null,
            online:0,
            offline:0,
          }
       },
      methods:{
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        select(v){
          this.radioId=v.id;
          this.selectData=v;
        },
        // 渲染数据
        render(){
          this.$axios({
            url: '/queryOrient',
            method: "post"
          }).then(({ data }) => {
            console.log(data.msg)
            if (data.code == 200) {
              this.tableData = data.data;
              for(let v=0;v<this.tableData.length;v++){
                if(this.tableData[v].status==0){
                  this.offline++;
                }else{
                  this.online++;
                }
              }
            } else {
              this.$message.error("数据加载失败！");
            }
          });
        }
      },
      mounted(){
        this.render();
      },
 }
</script>

<style lang="less"  scoped>
.banner {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}


 // 左侧盒子
.left{
  width: 500px;
  height: 100%;
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .tip{
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #d7d7d7;
      margin-bottom: 20px;
      .tip-l{
        font-size: 16px;
        font-weight: 700;
      }
      .tip-r{
        display: flex;
        span{
          margin-left: 20px;
        }
      }
    }

    .detail{
      display: flex;
      flex-wrap: wrap;
      p{
        height: 50px;
        display: flex;
        width: 200px;
      }
    }
}
.right{
  flex: 1;
  height: 100%;
  background: #fff;
  padding-top: 40px;
  background: url('@/assets/inspection/u5385.png');
}

</style>